<template>
  <view style="background-color: #181816; height: 100%;">
    <view class="content">
      <view class="box">
        <view class="box_text">
          按照法律规定要求，进一步使用区块链服务需要提供身份信息,请填写真实、有效的信息。
        </view>
      </view>
      <view class="cell_list">
        <view class="phone">
          <view class="input_content">
            <label>手机号</label>
            <view style="margin: 20rpx 0;">{{ privacyPhone }}</view>
          </view>
        </view>
        <view class="input_box">
          <view class="real_name">
            <view class="input_content">
              <label>真实姓名</label>
              <input type="text" placeholder="请输入姓名" v-model="real_name" />
            </view>
          </view>
          <view class="id_num">
            <view class="input_content">
              <label>身份证号</label>
              <input
                type="idcard"
                placeholder="请输入身份证"
                v-model="id_num"
              />
            </view>
          </view>
        </view>
      </view>
      <view class="next_btn" @click="verifyNext()">
        <button>下一步</button>
      </view>
      <view class="agree_read">
        <radio-group @change="onAgree" style="display: inline;">
          <label class="radio">
            <radio value="1" :checked="checked" @tap="Checked()"></radio>
          </label>
        </radio-group>
        我已同意该平台使用我提交的实名认证，具体协议看
        <text @tap="userAgreement()">《用户协议》</text>
        和
        <text @tap="privacyAgreement()">《隐私保护指引》</text>
      </view>
    </view>
    <!-- 认证成功弹窗 -->
    <u-popup
      :show="show_success"
      :round="30"
      mode="center"
      @close="close"
      @open="open"
    >
      <view class="showMask">
        <!-- <image
          src="../../static/bg.png"
          style="position: relative; width: 100%; border-radius: 30rpx;"
        ></image> -->
        <view class="content" style="top: -120rpx;">
          <view
            class="header_img"
            style="width: 211rpx; height: 214rpx; margin-left: 32%;"
          >
            <image src="/static/verify_success.png"></image>
          </view>
          <view class="content_text">
            恭喜您，认证成功！
          </view>
          <view class="content_text2">{{msg}}</view>
          <view class="get_btn">
            <view @click="go">前往查看</view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 认证失败弹窗 -->
    <u-popup
      :show="show_error"
      :round="30"
      mode="center"
      @close="close"
      @open="open"
    >
      <view class="showMask">
        <!-- <image
          src="../../static/bg.png"
          style="position: relative; width: 100%; border-radius: 30rpx;"
        ></image> -->
        <view class="content" style="top: -150rpx;">
          <view
            class="header_img"
            style="width: 243rpx; height: 289rpx; margin-left: 30%;"
          >
            <image src="/static/verify_error.png"></image>
          </view>
          <view class="content_text">
            认证失败!
          </view>
          <view class="content_text2">
            {{ msg }}
          </view>
          <view class="get_btn">
            <view @click="close()">返回修改</view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 用户协议弹窗 -->
    <u-popup
      :show="show_user_agreement"
      :round="30"
      mode="center"
      @close="close"
      @open="open"
    ></u-popup>
    <!-- 隐私保护协议弹窗 -->
    <u-popup
      :show="show_privacy_agreement"
      :round="30"
      mode="center"
      @close="close"
      @open="open"
    ></u-popup>
  </view>
</template>

<script>
import api from '@/request/api.js'
export default {
  data() {
    return {
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      phone: '',
      privacyPhone: '',
      uid: '',
      token: '',
      real_name: '',
      id_num: '',
      nft_address: '',
      show_success: false,
      show_error: false,
      show_user_agreement: false,
      show_privacy_agreement: false,
      agree: false, // 协议勾选状态
      agreeValue: '',
      value: '',
      msg: '',
      checked: false,
    }
  },
  onLoad() {
    let userInfo = uni.getStorageSync('userInfo')
    let token = userInfo.token
    let uid = userInfo.uid
    this.token = token
    this.uid = uid
    uni.getSystemInfo({
      success: (res) => {
        this.screenHeight = res.screenHeight * (750 / res.windowWidth) //将px 转换rpx
        console.log(this.screenHeight)
      },
    })
    /* 读取缓存手机号 */
    let phone = uni.getStorageSync('phone')
    console.log(phone)
    this.phone = phone
    this.privacyPhone = String(phone).replace(
      String(phone).slice(3, 7),
      '*'.repeat(4),
    )
  },
  methods: {
    /* 给后台返回用户填入的信息等待验证 */
    verifyNext() {
      if (!this.agreeValue) {
        uni.showModal({
          title: '请勾选实名认证协议',
        })
        return
      }
      api
        .verify({
          mobile: this.phone,
          realname: this.real_name,
          idcard: this.id_num,
          uid: this.uid,
          token: this.token,
        })
        .then((res) => {
          this.msg = res.message
          if (res.code == true) {
			if(!res.data.msg){
			}else{
				this.msg=res.data.msg
			}
            let userInfo = uni.getStorageSync('userInfo')
            userInfo.is_auth = 2
			console.log(userInfo)
			uni.setStorageSync('userInfo',userInfo)
            // uni.setStorage({
            //   key: 'userInfo',
            //   data: userInfo,
            //   complete: (res) => {
            //     console.log('res', res)
            //   },
            // })
            this.show_success = true
           let nft_address= res.data.nft_address
		   uni.setStorage({
		   	key:'nft_address',
			data:nft_address
		   })
            this.nft_address = res.data.nft_address
          } else {
			
            this.show_error = true
          }
        })
        .catch((err) => {
          console.log('err', err)
        })
    },
    go() {
      uni.redirectTo({
        url: 'verify_success?nft_address=' + this.nft_address,
      })
    },
    /* 用户协议 */
    userAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user_agreement',
      })
    },
    /* 隐私协议 */
    privacyAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/privacy_agreement',
      })
    },
    // 勾选同意协议
    onAgree(e) {
      this.agreeValue = e.detail.value
    },
    Checked() {
      let check = this.checked
      if (check) {
        this.checked = false
      } else {
        this.checked = true
      }
    },
    open() {},
    close() {
      this.show_error = false
      this.show_success = false
    },
  },
}
</script>

<style lang="scss">
page {
  height: 100%;
}

.content {
  width: 90%;
  margin: auto;
  padding-top: 30rpx;

  .box {
    width: 100%;
    height: 147rpx;
    background-color: #4f4c3d;
    border-radius: 10rpx;

    .box_text {
      width: 90%;
      margin: auto;
      padding-top: 34rpx;
      font-family: PingFang-SC-Regular;
      font-size: 24rpx;
      letter-spacing: 0rpx;
      color: #cccccc;
    }
  }

  .phone {
    width: 100%;
    margin: 30rpx auto;
    height: 160rpx;
    color: #fff;
    background-color: #242424;
    border-radius: 20rpx;

    .input_content {
      display: flex;
      flex-direction: column;
      width: 90%;
      margin: auto;
    }

    label {
      margin: 20rpx 0;
      font-size: 24rpx;
    }
  }

  .input_box {
    width: 100%;
    margin: 20rpx auto;
    height: 320rpx;
    color: #fff;
    background-color: #242424;
    border-radius: 20rpx;

    .real_name {
      .input_content {
        display: flex;
        flex-direction: column;
        width: 95%;
        margin: auto;
        border-bottom: 4rpx solid #3e3e3e;

        label {
          margin: 20rpx 0;
          font-size: 24rpx;
        }

        input {
          font-size: 30rpx;
          padding: 20rpx 0;
          color: #fff;
        }
      }
    }

    .id_num {
      box-sizing: border-box;

      .input_content {
        display: flex;
        flex-direction: column;
        width: 95%;
        margin: auto;

        label {
          margin: 20rpx 0;
          font-size: 24rpx;
        }

        input {
          font-size: 30rpx;
          padding: 20rpx 0;
          color: #fff;
        }
      }
    }
  }

  .cell_list {
    margin-top: 26rpx;
  }

  .next_btn {
    width: 100%;
    margin-top: 80rpx;

    button {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      color: #000;
      font-family: PingFang-SC-Medium;
      font-size: 26rpx;
      border-radius: 40rpx;
    }
  }

  .radio {
    color: #ffffff;
    font-family: PingFang-SC-Medium;
    font-size: 26rpx;
    line-height: 18rpx;
    letter-spacing: 0rpx;
    color: #999999;
    width: 90%;
    margin: auto;

    a {
      color: #ffffff;
      width: 90%;
      margin: auto;
    }

    /* radio 选中后的样式 */
    uni-radio .uni-radio-input.uni-radio-input-checked {
      background-color: #248067 !important;
      border-color: #248067 !important;
      background-clip: content-box !important;
      padding: 6rpx !important;
      box-sizing: border-box;
    }

    /* radio 选中后的图标样式*/
    uni-radio .uni-radio-input.uni-radio-input-checked::before {
      display: none !important;
    }
  }

  .agree_read {
    font-size: 26rpx;
    letter-spacing: 0rpx;
    color: #999999;
    padding: 40rpx 0;

    text {
      color: #4effff;
    }
  }
}

.showMask {
  position: relative;
  width: 623rpx;

  justify-content: center;
  align-items: center;

  .content {
    position: absolute;
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    justify-content: center;
    align-items: center;

    .header_img {
      image {
        width: 100%;
        height: 100%;
      }
    }

    .content_text {
      // margin-top: 30rpx;
      font-family: PingFang-SC-Medium;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .content_text2 {
      font-size: 26rpx;
      color: #4d4d4d;
      text-align: center;
      margin-bottom: 60rpx;
    }

    .get_btn {
      width: 160rpx;
      height: 64rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      // margin: 20rpx auto;
      // background-color: #ebc717;
      border-radius: 40rpx;
      border: 0;
      font-weight: 600;
      margin: 0 auto 70rpx;
      font-size: 26rpx;
      // button {
      //   width: 100%;
      //   height: 80rpx;
      //   line-height: 80rpx;
      //   background-color: #ebc717;
      //   border-radius: 6rpx;
      //   font-size: 26rpx;
      //   border: 0;
      // }
    }
  }
}
/deep/ uni-radio-group {
  display: inline !important;
}
</style>
